import { useIntersectionObserver } from '@vueuse/core'
// 引入默认图片
import defultimg from '@/assets/images/200.png'
export default {
  install (app) {
    console.log('全局指令定义', app)
    app.directive('imglazy', {
      // 只执行一次
      // 指令挂载到节点上时立即执行 并只会执行一次
      // el:绑定了指令的原生dom
      // binding.value 表达 v-imglazy="这里表达的值"
      mounted (el, binding) {
        console.log(el, '或', binding.value)
        // ；懒加载逻辑实现，当前el对象到视口之后我们才加载对应的url
        // 使用useIntersectionObserver监听
        const { stop } = useIntersectionObserver(
          // 第一个参数
          el,
          // 第二个参数
          ([{ isIntersecting }], observerElement) => {
            // console.log(isIntersecting)
            if (isIntersecting) {
              // 当图片加载失败时加载默认图
              el.addEventListener('error', () => {
                el.src = defultimg
              })
              // 在这里把url交给src
              el.src = binding.value
              // qin
              stop()
            }
          },
          // 第三个参数
          {
            // 用来控制目标target进入视图
            // 0-1 数值越大要求进入到数口的面剑越大
            threshold: 0.01
          }
        )
      }
    })
  }
}
